<template>
  <section class="my-wallet">
    <div class="inner">
      <div class="user-info clearfix">
        <div class="avatar">
          <img src="../../../assets/meirong1.jpg" alt="avatar">
        </div>
        <div class="user-detail">
          <p class="name">我是红粉宝宝1号</p>
          <p class="account">账号余额： <span>9999.99</span>元</p>
        </div>
      </div>
      <ul class="tab">
        <li class="tab-item" :class="{active: i.id === selected}" v-for="i in tabList" :key="i.id" @click="selected = i.id">
          <span>
            {{i.name}}
          </span>
        </li>
      </ul>
      <div class="tabs-content">
        <div class="draw-back" v-if="selected === 0">
          <Form :model="formData" label-position="right" :label-width="100">
            <FormItem label="支付宝账号：">
              <Input v-model="formData.alipay"></Input>
            </FormItem>
            <FormItem label="提现金额">
              <Input v-model="formData.num"></Input>
            </FormItem>
            <FormItem label="交易密码">
              <Input v-model="formData.pwd" type="password"></Input>
            </FormItem>
          </Form>
          <div style="width: 100px;text-align: center;margin: 0 auto">
            <Button type="primary" size="large" long >提现</Button>
          </div>
        </div>
        <div class="filter-form" v-if="selected !== 0">
          <Form :model="formItem" :label-width="70">
            <Row>
              <div class="left">
                <FormItem label="提现时间">
                  <DatePicker style="width: 105px" type="date" placeholder="日期" v-model="formItem.sdate"></DatePicker>&nbsp;
                  <TimePicker style="width: 87px" type="time" placeholder="时间" v-model="formItem.stime"></TimePicker>
                  &nbsp;-&nbsp;
                  <DatePicker style="width: 105px" type="date" placeholder="日期" v-model="formItem.edate"></DatePicker>&nbsp;
                  <TimePicker style="width: 87px" type="time" placeholder="时间" v-model="formItem.etime"></TimePicker>
                </FormItem>
                <FormItem label="关键词">
                  <Select v-model="formItem.keyword" style="width: 120px">
                    <Option value="1">关键词</Option>
                    <Option value="2">支出</Option>
                    <Option value="3">转入</Option>
                  </Select>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <Input style="width: 120px" v-model="formItem.inputkey" placeholder="输入关键字"></Input>
                </FormItem>
                <FormItem label="金额范围">
                  <Input style="width: 120px" v-model="formItem.sinput" placeholder="起始金额"></Input>
                  &nbsp;-&nbsp;
                  <Input style="width: 120px" v-model="formItem.einput" placeholder="结束金额"></Input>
                </FormItem>
              </div>
              <div class="right">
                <FormItem label="提现状态">
                  <Select v-model="formItem.status">
                    <Option value="0">全部</Option>
                    <Option value="1">未提现</Option>
                    <Option value="2">已提现</Option>
                  </Select>
                </FormItem>
                <FormItem label="提现方式">
                  <Select v-model="formItem.method">
                    <Option value="0">全部</Option>
                    <Option value="1">支付宝</Option>
                    <Option value="2">微信</Option>
                    <Option value="3">银联</Option>
                  </Select>
                </FormItem>
                <FormItem label="资金流向">
                  <Select v-model="formItem.direction">
                    <Option value="0">全部</Option>
                    <Option value="1">流向一</Option>
                    <Option value="2">流向二</Option>
                  </Select>
                </FormItem>
              </div>
            </Row>
          </Form>
          <div style="text-align: center">
            <Button type="primary" style="width: 200px">搜 索</Button>
          </div>
        </div>
        <div class="drawback-list" v-if="selected === 1">
          <div class="drawback-title">
            <ul class="clearfix">
              <li style="width: 160px">收款人账号</li>
              <li style="width:  98px">收款人</li>
              <li style="width: 200px">提现时间</li>
              <li style="width: 110px">提现现金</li>
              <li style="width: 100px">支付状态</li>
            </ul>
          </div>
          <div class="list-container">
            <ul >
              <li class="list-item clearfix" v-for="i in drawbackList" :key="i.id">
                <div style="width: 160px">{{i.account}}</div>
                <div style="width:  98px">{{i.name}}</div>
                <div style="width: 200px">{{i.time}}</div>
                <div style="width: 110px" class="pink">{{i.money}}</div>
                <div style="width: 100px" class="pink">{{i.status | status}}</div>
              </li>
            </ul>
          </div>
        </div>
        <div class="trade-list" v-if="selected === 2">
          <div class="trade-title">
            <ul class="clearfix">
              <li style="width: 210px">商品/项目|收款人</li>
              <li style="width: 140px">交易时间</li>
              <li style="width: 110px">收入/支出(元)</li>
              <li style="width: 100px">交易状态</li>
              <li style="width: 108px">操作</li>
            </ul>
          </div>
          <div class="list-container">
            <ul >
              <li class="list-item clearfix" v-for="i in tradeList" :key="i.id">
                <div style="width: 210px">
                  <p class="title">{{i.title}}</p>
                  <p class="subtitle">{{i.subtitle}}</p>
                </div>
                <div style="width:  140px">
                  {{i.time}}
                </div>
                <div style="width: 110px" class="pink">
                  {{i.money}}
                  <Tooltip content="点击查看详情" placement="top-start">
                    <Icon class="pink" type="md-arrow-dropdown-circle" />
                  </Tooltip>
                </div>
                <div style="width: 100px" >{{i.status | tradeStatus}}</div>
                <div style="width: 108px" class="pink">
                  <span v-if="i.status === 1">退款</span>
                  <Dropdown v-else-if="i.status === 2">
                    <Button type="primary">
                      确认收货
                      <Icon type="ios-arrow-down"></Icon>
                    </Button>
                    <DropdownMenu slot="list">
                      <DropdownItem class="pink">退货</DropdownItem>
                      <DropdownItem class="pink">详情</DropdownItem>
                      <DropdownItem class="pink">备注</DropdownItem>
                      <DropdownItem class="pink">延期收获</DropdownItem>
                    </DropdownMenu>
                  </Dropdown>
                  <Dropdown v-else>
                    <a class="pink" href="javascript:void(0)">
                      详情
                      <Icon type="ios-arrow-down"></Icon>
                    </a>
                    <DropdownMenu slot="list">
                      <DropdownItem class="pink">备注</DropdownItem>
                      <DropdownItem class="pink">延期收货</DropdownItem>
                    </DropdownMenu>
                  </Dropdown>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="page-container" v-if="selected !== 0">
          <Page :total="100" prev-text="上一页" next-text="下一页" />
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import MsgItem from '@/components/ListItem/MsgItem'
export default {
  name: 'MyWallet',
  components: {
      MsgItem
  },
   data () {
      return {
        selected: 0,
          formData: {
              alipay: '',
              num: '',
              pwd: '',
          },
        tabList: [
            {id: 0, name: '提现'},
            {id: 1, name: '提现记录'},
            {id: 2, name: '交易记录'}
        ],
        formItem: {},
          drawbackList: [
              {id:1, account: '180****0000', name: '林**', time: '2018-08-08 18:08:00', money: 50, status: 1},
              {id:2, account: '180****0000', name: '林**', time: '2018-08-08 18:08:00', money: 50, status: 2},
              {id:3, account: '180****0000', name: '林**', time: '2018-08-08 18:08:00', money: 50, status: 1},
              {id:4, account: '180****0000', name: '林**', time: '2018-08-08 18:08:00', money: 50, status: 2},
              {id:5, account: '180****0000', name: '林**', time: '2018-08-08 18:08:00', money: 50, status: 1},
              {id:6, account: '180****0000', name: '林**', time: '2018-08-08 18:08:00', money: 50, status: 2}
          ],
          tradeList: [
              {id:1, title: '[下额角]【把大处@刘剑锋】', subtitle: '中国医学科学院整形外科医院', time: '2018-08-08 18:08:00', money: '+50', status: 1},
              {id:2, title: '[下额角]【把大处@刘剑锋】', subtitle: '中国医学科学院整形外科医院', time: '2018-08-08 18:08:00', money: '-50', status: 2},
              {id:3, title: '[下额角]【把大处@刘剑锋】', subtitle: '中国医学科学院整形外科医院', time: '2018-08-08 18:08:00', money: '+50', status: 3},
              {id:4, title: '[下额角]【把大处@刘剑锋】', subtitle: '中国医学科学院整形外科医院', time: '2018-08-08 18:08:00', money: '-50', status: 4},
              {id:5, title: '[下额角]【把大处@刘剑锋】', subtitle: '中国医学科学院整形外科医院', time: '2018-08-08 18:08:00', money: '-50', status: 5},
              {id:6, title: '[下额角]【把大处@刘剑锋】', subtitle: '中国医学科学院整形外科医院', time: '2018-08-08 18:08:00', money: '+50', status: 6}
          ],
        list: [
        ]
      }
   },
    created () {
    },
    methods: {
    },
    filters: {
      status (status) {
          let s
          switch (status) {
              case 1:
                  s = '已支付'
                  break
              case 2:
                  s= '未支付'
                  break
              default:
                  s = '无状态'
          }
          return s
      },
        tradeStatus (status) {
            let s
            switch (status) {
                case 1:
                    s = '退款成功'
                    break
                case 2:
                    s= '等待确认收货'
                    break
                case 3:
                    s= '退款处理中'
                    break
                case 4:
                    s= '交易成功'
                    break
                case 5:
                    s= '交易关闭'
                    break
                case 6:
                    s= '等待对方发货'
                    break
                default:
                    s = '无状态'
            }
            return s
        }
    }
}
</script>

<style lang="less" scoped>
  @import "../../../style/style.less";
  .my-wallet {
    border: 1px solid @border-color;
    border-top: 3px solid @theme-color-dark;
    padding: 15px;
    .user-info {
      padding: 12px 0 24px;
      .avatar {
        width: 64px;
        height: 64px;
        float: left;
        margin-right: 40px;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .user-detail {
        float: left;
        .name {
          font-size: 20px;
          color: @theme-color-dark;
          margin-bottom: 10px;
        }
        .account {
          font-size: 16px;
          color: #666;
          span {
            color: @theme-color-dark;
          }
        }
      }
    }
    .tab {
      &:after {
        display: block;
        clear: both;
        content: "";
        visibility: hidden;
        height: 0;
      }
      .tab-item {
        float: left;
        width: 188px;
        height: 46px;
        line-height: 46px;
        text-align: center;
        font-size: 20px;
        color: #666;
        background-color: #f5f5f5;
        position: relative;
        cursor: pointer;
        &:last-child {
          border-right-color: transparent;
        }
      }
      .tab-item.active {
        color: @theme-color-dark;
        background-color: @theme-color-light;
        &:before {
          content: '';
          width: 100%;
          height: 3px;
          background-color: @theme-color-dark;
          position: absolute;
          bottom: 0;
          left: 0;
        }
      }
    }
    .tabs-content {
      padding-top: 15px;
      .draw-back {
        width: 450px;
      }
      .fixwidth,.left,.right {
        float: left;
      }
      .drawback-list {
        margin-top: 20px;
        .drawback-title {
          ul {
            background-color: #eee;
          }
          li {
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            color: #666;
            float: left;
            text-align: center;
          }
        }
        .list-container {
          .list-item {
            &:nth-child(odd) {
              background-color: #fff;
            }
            &:nth-child(even) {
              background-color: #f8f8f8;
            }
              > div {
                height: 40px;
                line-height: 40px;
                font-size: 14px;
                color: #666;
                float: left;
                text-align: center;
              }
            .pink {
              color: @theme-color-dark;
            }
          }
        }
      }
      .trade-list {
        margin-top: 20px;
        .trade-title {
          ul {
            background-color: #eee;
          }
          li {
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            color: #666;
            float: left;
            text-align: center;
          }
        }
        .list-container {
          .list-item {
            &:nth-child(odd) {
              background-color: #fff;
            }
            &:nth-child(even) {
              background-color: #f8f8f8;
            }
            > div {
              height: 40px;
              line-height: 40px;
              font-size: 14px;
              color: #666;
              float: left;
              text-align: center;
              padding: 10px 0;
              &:first-child {
                text-align: left;
                padding-left: 6px;
                height: auto;
                line-height: 1.6;
              }
              .title {
                font-size: 14px;
                color: #333;
              }
              .subtitle {
                font-size: 12px;
                color: #999;
              }
            }
            .pink {
              color: @theme-color-dark;
            }
          }
        }
      }
      .page-container {
        padding: 20px 0;
        text-align: center;
      }
    }
  }
</style>
